<template>
	<div class="side_bar">

		<div class="side_bar_item" :class="[this.active_id=='item_1'?'active':'']" v-on:click="onClick('item_1')">资料</div>
		<div class="side_bar_item" :class="[this.active_id=='item_2'?'active':'']" v-on:click="onClick('item_2')">库存</div>
		<div class="side_bar_item" :class="[this.active_id=='item_3'?'active':'']" v-on:click="onClick('item_3')">商资</div>
		<!-- <div class="side_bar_item">库房处理</div> -->
	</div>
</template>

<script>
	export default {
		name: 'SideBar',
		components: {},
		props: {props_active_id: String},
		data() {
			return {
				active_id: this.props_active_id,
				url:{
					item_1: '/admin',
					item_2: '/Inventory',
					item_3: '/goods_admin',
				}
			}
		},
		methods: {
			onClick(item_id){
				this.active_id = item_id
				this.$router.push(this.url[item_id])
				// location.reload();
				
			}
		},
		computed: {},
		watch: {},
		created() {},
		mounted() {

		},
	}
</script>

<style scoped lang="less">
	.side_bar {
		width: 60px;
		// height: 100%;
		background-color: #F0F0F0;
		position: absolute;
		left: 0;
		right: 0;
		top: 0;
		bottom: 0;
		.side_bar_item {
			font-weight: 800;
			// margin-top: 10px;
			text-align: center;
			line-height: 40px;
			height: 40px;
		}

	}
	.active{
		background-color: white;
		color: red;
	}
</style>
